<template>
	<view>
		<z-paging ref="paging" class="device-list" v-model="dataList" @query="getIncomeDate" default-page-size="20"
			:auto="false">
			<template #top>
				<view class="tab-box">
					<uv-tabs :list="tabList" @click="clickTab"></uv-tabs>
				</view>
				<view class="select-ground" @click="openPicker">
					<view class="item-left">选择代理</view>
					<view class="item-right">
						<view>{{selectGround}}</view>
						<image src="../../static/images/user/编组 4备份 10@2x.png" class="image"></image>
					</view>
				</view>
				<view class="select-ground">
					<view class="item-left">使用{{totalNumber}}次</view>
					<view class="item-right">总消费{{totalIncome}}元</view>
				</view>
			</template>
			<view style="height: 20rpx;"></view>
			<view class="month-box">
				<view class="list_item" v-for="item in dataList" :key="item.id">
					<view class="item-top">
						<view class="ground-name">所属代理商:{{item.agent_nickname}} </view>
						<view class="status">已完成</view>
					</view>
					<view class="item-center">支付时间:{{item.createtime}}</view>
					<view class="item-bottom">
						<view class="nickname">{{item.nickname }},
							<text v-if="item.pay_way=='alipay'" style="color: red;"> 支付宝支付</text>
							<text v-if="item.pay_way=='wechat'" style="color: blue;"> 微信支付</text>
							<text v-if="item.pay_way=='money'" style="color: blue;"> 余额支付</text>{{ item.amount }}元
						</view>
						<view class="order-info">
							支付类型:
							<text v-if="item.type=='1'">VIP充值 </text>
							<text v-if="item.type=='2'">购买钻石 </text>
						</view>
					</view>
				</view>
			</view>
			<uv-picker ref="picker" :columns="columns" keyName="name" @confirm="confirm"></uv-picker>
		</z-paging>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				tabList: [{
						name: '今日',
						value: 'today'
					}, {
						name: '昨日',
						value: 'yesterday'
					},
					{
						name: '本周',
						value: 'week'
					}, {
						name: '本月',
						value: 'month'
					}
				],
				selectGround: '',
				dataList: [],
				totalIncome: '0.00',
				totalNumber: '0',
				params: {
					agent_id: '',
					period: 'today'
				},
				columns: []
			}
		},
		onLoad() {
			this.getAgentList()
			this.getIncomeDate(1, 20)
		},
		methods: {
			clickTab(e) {
				this.params.period = e.value
				this.refreshList()
			},
			refreshList() {
				this.$refs.paging.scrollToTop()
				this.$refs.paging.refresh();
			},
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.params.agent_id = e.value[0].id
				this.selectGround = e.value[0].name
				this.refreshList()
			},
			getAgentList() {
				api.getAgentList().then(res => {
					let columns = [{
						name: "全部",
						id: ""
					}]
					this.columns = [columns.concat(res.data.map(item => {
						return {
							...item,
							name: item.nickname + '-' + item.mobile
						}
					}))];
				});
			},
			getIncomeDate(pageNo, pageSize) {
				api.getIncomeDate({
					...this.params,
					page: pageNo,
					limit: pageSize
				}).then(res => {
					this.$refs.paging.complete(res.data.order_list.data);
					this.totalNumber = res.data.order_list.total
					this.totalIncome = res.data.total_income
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.empty-box {
		text-align: center;
		margin-top: 80px;
		color: #adadad;

		.image {
			width: 200px;
			height: 200px;
			margin-bottom: 20px;
		}
	}

	.select-ground {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;

		.item-right {
			display: flex;
			align-items: center;
		}

		.image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.month-box {
		padding: 20rpx;
		background-color: #ffffff;

		.list_item {
			margin: 20rpx 0 0;
			padding: 20rpx 0;

			.item-top {
				display: flex;
				justify-content: space-between;

				.ground-name {}

				.status {
					font-size: 28rpx;
					color: #22d0bf;
				}
			}

			.item-center {
				margin: 6rpx 0;
				color: #adadad;
			}

			.item-bottom {
				display: flex;
				align-items: center;

				.nickname {
					color: blue;
				}

				.order-info {
					color: #ff7270;
				}
			}
		}
	}
</style>